<template>
  <div class="city">
    <!-- search -->
    <van-search v-model="searchValue" show-action shape="round" placeholder="城市/区域/位置" @cancel="onCancel" />

    <!-- cityList -->
    <div class="top">
      <van-tabs v-model:active="tabActive" @click-tab="onClickTab" title-active-color="#606af6">
        <template v-for="(val, key, index) in allCity " :key="key">
          <van-tab :title="val.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <!-- 导入index-bar组件 城市列表 -->
      <template v-for="(val, key, index) in allCity " :key="key">
        <cityGroup v-show="tabActive === key " :cityGroupData="val"></cityGroup>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { getCityAPI } from "@/services/modules/citysAPI";
import useCityStore from "@/stores/modules/cityStore";
import { storeToRefs } from "pinia";
/* 导入城市列表数据 */
import cityGroup from '@/views/city/city-group.vue'

const router = useRouter();
/* search */
const searchValue = ref("");

const onCancel = () => {
  router.back();
};
/* cityTab切换 */
const tabActive = ref();

const onClickTab = (title) => {
  console.log(title);
};
/* 从store中获取城市数据 */
const cityStore = useCityStore()
cityStore.getCityData()
const { allCity } = storeToRefs(cityStore)
console.log(allCity.value.cityGroup);

/* 选择tab后显示对应城市列表数据 */
const allCityData = computed(() => { return allCity.value[tabActive.value] })
console.log(allCityData.value);
</script>

<style lang="less" scoped>
.city {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: rgb(242, 246, 250);
  overflow-y: auto;

  :deep(.van-search__field) {
    margin-right: 18px;
  }

  :deep(.van-tabs__line) {
    background: #606af6;
  }

  .top {
    position: relative;
    z-index: 9;
  }

  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }


}
</style>